<template>
  <view class="page">
    <view class="header">
      <view class="header__left">
        <!-- <image class="header__icon" src="~@/static/carIcon.png" /> -->
        <text>请选择车牌号码</text>
      </view>
      <view class="header__right">
        <text>自助码/卡号/港澳车牌</text>
        <!-- <image class="header__arrow" src="~@/static/my/yellowArrow.png" /> -->
      </view>
    </view>
    <CarNumber v-model="carNumber" />
    <template v-if="carList.length > 0">
      <view class="title">
        <!-- <image class="title__icon" src="~@/static/time.png" /> -->
        <text>历史记录</text>
      </view>
      <view class="tags">
        <view
          @click="history(item)"
          v-for="item in carList"
          :key="item.number"
          :class="{ active: item.orderCode }"
          class="tags__item"
        >
          {{ numberFormat(item.number) }}
        </view>
      </view>
    </template>
    <view @tap="search" class="global-btn">搜 索</view>
    <!-- <view @tap="imitate" v-if="carList.length > 0" class="global-btn" style="background-color: #5a89ff">临时模拟停车记录</view> -->
    <popup ref="popup" />
  </view>
</template>

<script>
import CarNumber from "./CarNumber/CarNumber";
import { getCarListAPI } from "@/api/car.js";
import { getRecordInfoAPI, imitateAPI } from "@/api/record";

export default {
  components: { CarNumber },
  data() {
    return {
      carNumber: "",
      carList: [],
    };
  },
  onLoad() {
    this.getCarList();
  },
  methods: {
    async search() {
      if (!this.carNumber) return this.$refs.popup.error("请输入车牌号码");
      const result = await this.getCarParking(this.carNumber);
      if (!result) return this.$refs.popup.error("当前车辆暂未停放在场地中");
      uni.navigateTo({
        url: `/subpages/index/pay/pay?number=${encodeURIComponent(
          this.carNumber
        )}`,
      });
    },
    /** @name 历史记录 **/
    async history(item) {
      const result = await this.getCarParking(item.number);
      if (!result) return this.$refs.popup.error("当前车辆暂未停放在场地中");
      uni.navigateTo({
        url: `/subpages/index/pay/pay?number=${encodeURIComponent(
          item.number
        )}`,
      });
    },
    /** @name 查询车辆是否在停放中 **/
    getCarParking(number) {
      return new Promise((resolve) => {
        getRecordInfoAPI({
          number,
        }).then((res) => {
          if (res) {
            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
    },
    /** @name 格式化车牌 **/
    numberFormat(number) {
      if (!number) return;
      const arrayNumber = number.split("");
      arrayNumber.splice(2, 0, " · ");
      return arrayNumber.join("");
    },
    /** @name 获取车辆列表 **/
    getCarList() {
      getCarListAPI().then((res) => {
        this.carList = res.rows;
      });
    },
    /** @name 模拟记录 **/
    imitate() {
      const form = {
        number: this.randomNumber(),
      };
      imitateAPI(form).then(() => {
        this.$refs.popup.success("模拟成功");
        this.getCarList();
      });
    },
    /** @name 随机生成车牌号码 **/
    randomNumber() {
      const result = this.carList.filter((car) => !car.orderCode);
      const random = Math.floor(Math.random() * result.length);
      return result[random].number;
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.page {
  width: 90%;
  margin: 0 auto;
}
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48rpx;
}
.header__left {
  display: flex;
  align-items: center;
  font-size: #333;
  font-size: 32rpx;
  font-weight: bold;
}
.header__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
}
.header__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: $primary;
  font-size: 24rpx;
  background-color: #f5f5f5;
  border-radius: 6rpx;
  height: 48rpx;
  box-sizing: border-box;
  padding: 0 8rpx 0 16rpx;
}
.header__arrow {
  width: 32rpx;
  height: 64rpx;
}
.title {
  display: flex;
  align-items: center;
  font-size: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 48rpx;
  margin-bottom: 24rpx;
}
.title__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
}
.tags {
  display: flex;
  flex-wrap: wrap;
}
.tags__item {
  background-color: #f5f5f5;
  border-radius: 6rpx;
  color: $primary;
  font-size: 28rpx;
  height: 64rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12rpx 24rpx 12rpx 0;
  width: 200rpx;
  white-space: nowrap;
  &.active {
    background-image: url("~@/static/index/carIcon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
  }
}
.global-btn {
  width: 100%;
  position: static;
  margin: 72rpx auto;
}
</style>
